<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        #shopping{
            margin: 20px auto 0 auto;
            width: 320px;
        }
        #cart{
            background: #fff url("./img/cart.png") 20px 6px no-repeat;
            border: solid 1px #595959;
            width: 100px;
            height: 28px;
            float: right;
            padding-left: 45px;
            line-height: 28px;
            position: relative;
            cursor: pointer;
        }
        #cart span{
            position: absolute;
            color: #fff;
            background: #e76204;
            display: block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            top: -5px;
            right: 15px;
            font-size: 8px;
            line-height: 15px;
            text-align: center;
        }
    </style>
</head>

<body>
    <section id="shopping">
        <div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div>
        <div id="cartList">
            <h2>最新加入的商品</h2>
            <ul>
                <li><img src="images/makeup.jpg"></li>
                <li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
                <li>¥558.00×1<br />删除</li>
            </ul>
            <div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>
        </div>
    </section>
    <script>
    //    document.getElementById("cartList").style.display="none";
        function over(){
            document.getElementById("cart").style.backgroundColor="#ffffff";
            document.getElementById("cart").style.zIndex="100";
            document.getElementById("cart").style.borderBottom="none";
            document.getElementById("cartList").style.display="block";
            document.getElementById("cartList").style.position="relative";
            document.getElementById("cartList").style.top="-1px";
        }
        function out(){
            document.getElementById("cart").style.backgroundColor="#f9f9f9";
            document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
            document.getElementById("cartList").style.display="none";
        }

        // function over() {
        //     document.getElementById("cart").className = "cartOver";
        //     document.getElementById("cartList").className = "cartListOver";
        //     //alert(document.getElementById("cartList").display);
        //     //alert(document.getElementById("cartList").currentStyle.display);  //使用currentStyle获取属性值
        //     /*使用getComputedStyle获取属性值
        //     var cartList=document.getElementById("cartList");
        //     alert(document.defaultView.getComputedStyle(cartList,null).display);*/
        // }
        // function out() {
        //     document.getElementById("cart").className = "cartOut";
        //     document.getElementById("cartList").className = "cartListOut";
        // }

    </script>
</body>

</html>